<template>
  <div v-loading="loading">
    <div v-if="!isDisabled">
      <!-- banner -->
      <game-banner ref="gameBanner" @getGameInfoSuccess="gameInfoSuccess" />

      <div class="game_page">
        <!-- 顶部导航 -->
        <nav>
          <ul class="menu_list">
            <li
              v-for="(item, index) in leftMenuData"
              :key="index"
              class="menu_item"
              :class="{ 'router-link-active': activeName === item.name }"
              @click="clickEnter(item.name)"
            >
              {{ item.title }}
            </li>
          </ul>
        </nav>
        <router-view :game-id="gameId" />
      </div>
    </div>
    <div v-else>

      <div class="gl_noData">

        <p class="noData">
          <span>
            当前赛事已被禁用，请联系平台管理员
          </span>
        </p>

      </div>
    </div>
  </div>
</template>

<script>
import gameBanner from './components/GameBanner/index';
import { api_GET_EventsManagementGift, api_GET_EventsManagementVotingRegulationVotingRegulation } from '@/extend/api/gameswaggerApi/app';
export default {
  components: {
    gameBanner
  },
  data() {
    return {
      isDisabled: false,
      loading: false,
      activeName: 'GameInfo',
      leftMenuData: [
        {
          title: '赛事主页',
          name: 'GameInfo'
        },
        {
          title: '日程安排',
          name: 'Schedule'
        },
        {
          title: '场次对阵',
          name: 'Brackets'
        },
        // {
        //   title: '人员榜',
        //   name: 'Athlete'
        // },
        {
          title: '人气榜',
          name: 'Popularity'
        },
        {
          title: '奖牌榜',
          name: 'Medal'
        }
      ],
      gameDataMenu: {
        title: '参赛数据',
        name: 'GameData'
      },
      gameId: ''
    };
  },
  created() {
    const $route = this.$route;
    this.gameRoute = $route.params.id;
    this.activeName = $route.activeName || $route.name;
    this.PopularitySuccess();
  },
  methods: {
    // 赛事获取成功
    gameInfoSuccess(gameInfo) {
      this.gameId = gameInfo.id;
      const _findGameData = this.leftMenuData.find(item => item.name === this.gameDataMenu.name);
      if (!_findGameData && gameInfo.setting.showEntryData) {
        this.leftMenuData.splice(3, 0, this.gameDataMenu);
      }
    },
    // 点击赛事报名
    clickEnter(name) {
      this.activeName = name;
      // 赛事主页 不添加赛事id;
      if (name === 'GameInfo') {
        this.$router.push({ name: name });
      } else {
        this.$router.push({
          name: name,
          query: { id: this.gameId }
        });
      }
    },
    // 人气榜入口管理-礼物规则都有 才显示人气榜
    PopularitySuccess() {
      const that = this;
      Promise.all([this.getGiftList(), this.getRules()]).then(res => {
        console.log(res[0], res[1], '礼物榜与规则');
        if (!res[0] || !res[1]) {
          that.leftMenuData.forEach((value, index, array) => {
            if (value.title === '人气榜') {
              array.splice(index, 1);
            }
          });
        }
      });
    },
    // 获取人气榜礼物列表
    getGiftList() {
      return new Promise((resolve, reject) => {
        api_GET_EventsManagementGift({ Page: 1, SkipCount: 0, MaxResultCount: 10 }).then(res => {
          resolve(res.totalCount);
        }, error => {
          reject(error);
        });
      });
    },
    // 获取人气榜规则
    getRules() {
      return new Promise((resolve, reject) => {
        api_GET_EventsManagementVotingRegulationVotingRegulation().then(res => {
          resolve(res && res.title);
        }, error => {
          reject(error);
        });
      });
    }
  }
};
</script>
<style scoped>
.game_page {
  padding: 20px;
}
.menu_list {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.menu_item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 164px;
  height: 40px;
  z-index: 1;
  border: 1px solid #aeb7c1;
  margin-left: -1px;
  color: #AEB7C1;
  font-size: 18px;
  cursor: pointer;
}
.menu_item:first-child {
  margin-left: 0;
}
.game_page .router-link-active {
  z-index: 2;
  color: #E02020;
  border: 1px solid #E02020;
}
.noData {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

</style>
